<template>
  <div>
    <div id="editorElem" style="text-align:left"></div>
  </div>
</template>

<script>
import E from 'wangeditor'

let editorItem = new E('#editorElem')
export default {
  name: 'editor',
  props: {
    article: Object
  },
  watch: {
    article: function (newVal, oldVal) {
      if (newVal) {
        editorItem.txt.html(newVal.inner)
      }
    }
  },
  mounted () {
    this.createEditor()
  },
  methods: {
    createEditor: function () {
      editorItem.customConfig.colors = [
        '#000000',
        '#ffffff',
        '#fe4c02',
        'cyan'
      ]
      editorItem.customConfig.fontNames = [
        '宋体',
        '微软雅黑',
        'cursive',
        'serif',
        'LYZT',
        'SXSGY',
        'XXXY'
      ]
      editorItem.customConfig.onchange = (html) => {
        this.article.inner = html
      }
      editorItem.create()
    }
  }
}
</script>

<style>
</style>
